<template>
    <div class="head-wrapper">
        <a class="header-siderbar-title-wrapper" href="javascript:;">SKY平台</a>
        <a class="header-siderbar-trigger-wrapper" @click="handerSiderbar">
            <slot name="siderbarTriggerIcon"></slot>
        </a>
        <span class="header-avatar-wrapper" >
              <div style="display: inline-block;vertical-align: top;line-height: 45px;text-align: end;padding: 0 10px;color:#ffffff;">
                  {{$store.getters.user.username}}
              </div>
            <el-dropdown class="avatar-container" size="medium" :hide-on-click="false" @command="handleDropdown">
                <div class="avatar-wrapper" style="height: 60px">
                    <el-avatar :size="size" >
                        <img :src="avatarPath">
                    </el-avatar>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="userInfo">个人信息</el-dropdown-item>
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </span>
    </div>
</template>

<script>
    import mainApi from '@/api/main'
    import session from '@/utils/session'
    import constant from '@/utils/constant'
    export default {
        name: "Header",
        data() {
            return {
                size: 'large',
            }
        },
        computed: {
            avatarPath() {
                return require('@/assets/avatar.png');
                    // `${constant.BaseUrl}/api-f/${this.$store.state.user.user.headImgUrl}` || require('@/assets/avatar.png')
            },
            username() {
                return this.$store.state.user.user.nickname || '11'
            }

        },
        methods: {
            handerSiderbar() {
                this.$emit('hander-siderbar')
            },
            handleDropdown(command) {
                if(command == 'logout') {
                    this.$confirm('确定要退出么?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$ajax.postForm(this.$api.oauth.logout).then(result=> {
                            session.removeToken();
                            window.location.reload();
                        });
                    }).catch(() => {
                    });
                } else if(command == 'userInfo'){

                } else {
                    console.log("dropdown点击有误",command)
                }
            }
        }
    }
</script>

<style scoped lang="less">
    @import '../../../../assets/css/main';
</style>
